<template lang="pug">
  .clearfix
    Modal(
      width="600"
      v-model="isShowBackModal"
      title="确认发放"
      class-name="vertical-center-modal"
    )
      .search-form.mb-10.pr-10
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="90")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'inputnumber'")
              InputNumber(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'interval'")
              DatePicker.input-has-border.pull-left(v-model="formData[item.model]" :type="item.modal" :placeholder="item.placeholder" @on-change="handleChangeDatePicker" clearable)
            template(v-if="item.type === 'upload'")
              Upload.pull-left.mb-5(
                ref="upload"
                :show-upload-list="false"
                accept=".doc, .docx, .xls, .xlsx, .pptx, .jpg, .jpeg, .png, .rar"
                :action="baseUrl + 'api/FinanceSSPayable/AnnexUpload?categoryName=确认发放附件'"
                :on-success="uploadSuccess"
                :headers="headers"
                :max-size="10 * 1024"
                :on-exceeded-size="handleMaxSizeTen"
              )
                Button.download-btn(type="info") 附件上传
              div.pull-left.line-h-32.ml-10(v-if="fileObj && fileObj.Id")
                span.mr-10 {{fileObj.Name}}
                Icon.cursor-pointer.text-error(type="ios-close-circle" @click="removeFile")

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import { FinanceSPayableApi } from '@/api/FinanceSPayable.api.js'
import { Common } from '@/utils/common.js'
import Cookies from 'js-cookie'
export default {
  name: '',

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      baseUrl: baseUrl,
      modalKey: null,
      isShowBackModal: false,
      formData: {
        salaryTime: new Date(),
        serviceCharge: 0,
        annexId: null
      },
      formItem: [
        { type: 'interval', label: '确认时间：', placeholder: '请输入确认时间', prop: 'salaryTime', model: 'salaryTime', style: 'ivu-col-span-24' },
        { type: 'inputnumber', label: '手续费：', placeholder: '请输入手续费', prop: 'serviceCharge', model: 'serviceCharge', style: 'ivu-col-span-24' },
        { type: 'upload', label: '附件上传：', placeholder: '附件上传', prop: 'annexId', model: 'annexId', style: 'ivu-col-span-24' },
      ],
      rules: {
        salaryTime: [{ required: true, message: '请输入确认时间' }]
      },
      isCanSubmit: true,
      parentRow: null,
      datePickerDefault: new Date(), // 当前时间
      fileObj: null,
    }
  },

  watch: {
  },

  computed: {
    setFormItem () {
      if (this.modalKey !== 'fromList') {
        this.formItem[2].style = 'ivu-col-span-24 display-none'
      } else {
        this.formItem[2].style = 'ivu-col-span-24'
      }
      return this.formItem
    },
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowBackModal = false
    },

    show (parentRow, parentSelectedId) {
      this.parentRow = parentRow
      this.parentSelectedId = parentSelectedId
      console.log('parentSelectedId: ', parentSelectedId)
      this.isCanSubmit = true
      this.isShowBackModal = true
      this.$refs.formData.resetFields()
      this.fileObj = null
    },
    
    // 确认发放
    async handlePaied (row) {
      var params = {
        SalaryID: row.id,
        SalaryMonth: row.salaryMonth
      }
      let res = await FinanceSPayableApi.paied(params)
      console.log('确认发放res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query();
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },
    async handleSubmit () {
      var params = {
        SalaryID: this.modalKey == 'fromList' ? this.parentRow.id : this.$route.query.salaryID,
        SalaryMonth: this.modalKey == 'fromList' ? this.parentRow.salaryMonth : this.$route.query.salaryMonth,
        // EmployeeIDs: this.modalKey == 'fromList' ? null : this.parentSelectedId,
        SalaryTime: this.formData.salaryTime ? this.$moment(this.formData.salaryTime).format('YYYY-MM-DD') : '',
        serviceCharge: this.formData.serviceCharge,
        annexId: this.formData.annexId
      }
      if (this.modalKey != 'fromList') {
        params.SalaryBillIDs = this.parentSelectedId
      }
      console.log('params: ', params)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          console.log('提交表单', params)          
          FinanceSPayableApi.paied(params).then(res => {
            if (res.data.success) {
              this.isCanSubmit = false
              this.isShowBackModal = false
              this.$Message.success(res.data.message)
            } else {
              this.isCanSubmit = true
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
            this.$emit('query')
          })
        }
      })
    },

    // 日期选择
    handleChangeDatePicker(val) {
      console.log("val: ", val);
    },

    // 上传前文件
    handleBeforeUpload (file) {
      var str = file.name.substring(file.name.lastIndexOf('.'), file.name.length)
      if (['.xls', '.xlsx'].indexOf(str) == -1) {
        this.$Message.warning('仅支持上传xlsx文件')
        this.file = null
      } else {
        this.file = file
        console.log('file: ', this.file)
      }
      return false
    },

    // 上传成功
    uploadSuccess (res, row) {
      console.log('上传成功res: ', res)
      console.log('上传成功row: ', row)
      if (res.Code === 200 && res.Success) {
        this.fileObj = res.Data
        this.formData.annexId = res.Data.Id
      } else {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 普通附件下载
    accessoryDownload (url) {
      console.log('下载url: ', url)
      window.open(url, '_blank')
    },

    // 移除附件
    removeFile () {
      this.fileObj = null
      this.formData.annexId = null
    },

    // 超过10M提示
    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
